<template>
	<view class="content">
		<view class="headertop" :style="{'background':flag1?'#000':''}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 2@2x.png" class="pagelefticon"
					mode=""></image>
			</view>
		</view>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(1).png" mode="" class="pageimg">
		</image>
		<view class="bottoncontent">
			<view class="center">
				<scroll-view class="classify" scroll-x="true" @scroll="handleScroll">
					<view class="itembox" @click="qiehuan(-1)">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" v-if="active!=-1">
						</image>
						<image src="/static/Group 11432@2x(1).png" class="itemboxback"></image>
						<view class="title">
							全部营位
						</view>
					</view>
					<view class="itembox" @click="qiehuan(index)" v-for="(item,index) in classList" :key="index">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" v-if="active!=index">
						</image>
						<image :src="item.image" class="itemboxback" mode=""></image>
						<view class="title">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
				<!-- 	<view class="itembox" @click="active=1">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png" class="itemboxmengc"
							mode="aspectFill" v-if="active!=1">
						</image>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11429@2x.png" class="itemboxback"
							mode="aspectFill"></image>
						<view class="title">
							半山露营
						</view>
					</view>
					<view class="itembox" @click="active=2">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png" class="itemboxmengc"
							mode="aspectFill" v-if="active!=2">
						</image>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11429@2x.png" class="itemboxback"
							mode="aspectFill"></image>
						<view class="title">
							露营基地
						</view>
					</view> -->
				<view class="seacherbox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(11).png" class="sechicon"
						mode=""></image>
					<input type="text" placeholder="请输入关键词" v-model="keywords" placeholder-class="title_input"
						class="custom-input" />
					<image src="/static/微信图片_20250521183655.png" class="closeicon" @click="closeinput" v-if="keywords"
						mode=""></image>
					<view class="seachbtn" @click="camplistinit('搜索')">
						搜索
					</view>
				</view>
				<view class="riqi">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
						<view id="demo1" class="scroll-view-item_H uni-bg-red"
							:style="{'background': yansefun(item,index)}" @click="camplistfun(item,index)"
							v-for="(item,index) in timerarr" :key="item.id">
							<view class="t1" :style="{'color': yansefun1(item,index)}">
								{{item.title}}
							</view>
							<view class="t1" :style="{'margin-top':'5rpx','color':yansefun1(item,index)}">
								{{item.timestart}}~{{item.timeend}}
							</view>
							<view class="t2"
								:style="{'background':item.yueman==0?'':'#C9CDD4','color':item.yueman==0?'':'#86909C'}">
								{{item.yueman==0?'可预约':'已约满'}}
							</view>
						</view>
					</scroll-view>
					<view class="boxriqi" @click="openrili">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(12).png" mode="">
						</image>
						<span>日期</span>
					</view>
				</view>
				<view class="itemboxss">
					<view class="msgicon" v-if="!camplistarr.length">
						<image src="/static/微信图片_20250514232056.png" mode="widthFix"></image>
						<view class="msgtext">
							暂无营位
						</view>
					</view>
					<view class="itembox" @click="gopage(item)" v-for="(item,index) in camplistarr" :key="index">
						<view class="leftpo">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(3).png"
								class="imgvack" mode="">
							</image>
							<span>可容纳:{{item.maxnum}}人</span>
						</view>
						<view class="centerbox">
							<view class="toopbiox">
								<image :src="item.image" class="leftbox" mode="">
								</image>
								<view class="infobox">
									<view class="t1">
										<view class="gu" v-if="item.type==2">
											<image
												src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 24509@2x(1).png"
												mode="">
											</image>
											<span>固</span>
										</view>
										<view class="t2">
											{{item.title}}
										</view>
									</view>
									<view class="tt2">
										<image
											src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(13).png"
											mode=""></image>
										<span class="text">{{item.address}}</span>
									</view>
									<view class="bqians">
										<view class="bq" v-if="item.request">
											{{item.request[0]}}
										</view>
										<view class="bq" v-if="item.place">
											{{item.place[0]}}
										</view>
										<view class="bq" v-if="item.service">
											{{item.service[0]}}
										</view>
									</view>
									<view class="jiage">
										￥{{item.price}}
									</view>
								</view>
							</view>
							<view class="bnttom" @click.stop="ff()">
								<view class="left1" @click.stop="item.bool=!item.bool">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x.png"
										v-if="!item.bool" mode=""></image>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11457@2x.png"
										v-if="item.bool" mode=""></image>
									<span>可预约</span>
								</view>
								<view class="ljyuyue" @click.stop="itemyuyue(item)">
									立即预约
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="height: 300rpx;">

		</view>
		<up-popup :show="show" mode="bottom">
			<uni-calendar :insert="false" :date="query.datetime" @close="close" ref="calendar" :start-date="startDate"
				:end-date="endDate" @confirm="confirmriqi" />
		</up-popup>
		<up-popup :show="show1" mode="center">
			<view class="popuview">
				<image src="/static/Frame@2x(15).png" class="popuviewclose" @click="show1=false" mode=""></image>
				<view class="toptitle">
					暂无法预约营位
				</view>
				<view class="text">
					选中营位已被预约，请重新选择营位或预约时间
				</view>
				<scroll-view class="classifybox" scroll-y="true">
					<view class="classifybox_item" v-for="item in yuyuearr" :key="item.id">
						<view class="classifybox_item_t1">
							<image src="/static/Group 11393@2x.png" class="bqbukeyy" mode=""></image>
							<view class="tt">
								{{item.title}}
							</view>
						</view>
						<view class="t2" v-if="timerarr[active1]">
							预约时间：{{query.datetime}} {{timerarr[active1]['timestart']}}-{{timerarr[active1]['timeend']}}
						</view>
					</view>
				</scroll-view>
				<view class="btnline">
					<view class="btn1" @click="show1=false">
						取消
					</view>
					<view class="ccyy" @click="show1=false">
						重新预约
					</view>
				</view>
			</view>
		</up-popup>
		<view class="bottomfixed">
			<view class="linebox">
				<view class="leftty" @click="allquanx">
					<image v-if="flag===false"
						src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Ellipse 2638@2x.png" mode=""></image>

					<image src="/static/duihao.png" v-else mode="">
					</image>
					<span>已选{{yx}}个营位</span>
				</view>
				<view class="rightbtn" @click="yuyue">
					立即预约
				</view>
			</view>
			<Tabbar :page="page"></Tabbar>
		</view>
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	import Tabbar from '@/components/tabbar.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		onShow,
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	import {
		classlist,
		timesj,
		camplist,
		campyy
	} from '@/api/Campposition.js'
	const query = reactive({
		datetime: '',
		pid: ''
	})
	const page = ref('')
	const active = ref(-1)
	const yuyuearr = ref([])
	const startDate = ref('')
	const endDate = ref('')
	const calendar = ref(null)
	const active1 = ref(0)
	const barHeight = ref('')
	const statusBarHeight = ref(0)
	const flag1 = ref(false)
	const denglu = ref(null)
	const flag = ref(false)
	const camplistarr = ref([])
	const keywords = ref('')
	const show = ref(false)
	const show1 = ref(false)
	const classList = ref([])
	const timerarr = ref([])
	const yx = computed(() => {
		var dui = camplistarr.value.filter(item => item.bool == true)
		return dui.length
	})
	onMounted(() => {
		console.log('我创建了', uni.getSystemInfoSync().statusBarHeight, wx.getMenuButtonBoundingClientRect());
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onShow(() => {
		page.value = '/pages/Campposition/index'
		classlistinit()
	})
	onLoad(() => {
		const now = new Date()
		var month = (now.getMonth() + 1) > 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
		var ri = now.getDate() > 10 ? now.getDate() : '0' + now.getDate()
		query.datetime = now.getFullYear() + '-' + month + '-' + ri
		getNext30Days()
	})

	function handleScroll(e) {
		console.log(e, '::滚动距离----------')
	}

	function closeinput() {
		keywords.value = ''
		active.value = -1
		camplistinit()
	}
	async function yuyue() {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}

		if (timerarr.value[active1.value]['yueman'] == 1) {
			uni.showToast({
				title: '请选择时间段预约',
				icon: 'none'
			})
			return
		}
		var dui = camplistarr.value.filter(item => item.bool == true)
		if (!dui.length) {
			uni.showToast({
				title: '请选择可预约的营位',
				icon: 'none'
			})
			return
		}
		var ids = dui.map(item => item.id)
		const res = await campyy({
			date: query.datetime,
			cid: ids.join(),
			pid: timerarr.value[active1.value]['id']
		})
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			return
		}

		if (res.data.code == 1) {
			if (res.data.data.length) {
				show1.value = true
				yuyuearr.value = res.data.data
				return
			}
		}
	
		uni.setStorageSync('yuyuesoninfo', query)
		uni.setStorageSync('yingweiarr', dui)
		uni.navigateTo({
			url: '/sub_index/index/yuyueinfo?typestr=duoxuan'
		})
	}
	async function itemyuyue(item) {
		console.log(123123123123)
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}
		if (timerarr.value[active1.value]['yueman'] == 1) {
			uni.showToast({
				title: '请选择时间段预约',
				icon: 'none'
			})
			return
		}

		const res = await campyy({
			date: query.datetime,
			cid: item.id,
			pid: timerarr.value[active1.value]['id']
		})
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			return
		}

		if (res.data.code == 1) {
			if (res.data.data.length) {
				show1.value = true
				yuyuearr.value = res.data.data
				return
			}
		}

	
		uni.setStorageSync('yingweiarr', [item])
		uni.setStorageSync('yuyuesoninfo', query)
		uni.navigateTo({
			url: '/sub_index/index/yuyueinfo?typestr=duoxuan'
		})
	}

	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			flag1.value = true
		} else {
			flag1.value = false
		}
	})

	function ff() {

	}

	function qiehuan(ind) {
		if (ind != -1) {
			keywords.value = ''
		}
		if (active.value != ind) {
			active.value = ind
			camplistinit()
		}
	}
	// 确定选择日历
	function confirmriqi(e) {
		console.log(e, 'eeeeeeeeeeeeeeeee');
		query.datetime = e.fulldate
		timeinit()
	}

	function close() {
		show.value = false
	}

	function openrili() {
		show.value = true
		console.log('daiakirili');
		calendar.value.open();
	}



	function yansefun(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#fff'
			} else {
				return ''
			}
		} else {
			return '#E5E6EB;'
		}
	}

	function yansefun1(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#4E5969'
			} else {
				return ''
			}
		} else {
			return '#86909C;'
		}
	}

	function camplistfun(item, index) {
		if (item.yueman == 1) {
			uni.showToast({
				icon: 'none',
				title: '该时间段已约满'
			})
			return
		} else {
			active1.value = index
			query.pid = timerarr.value[active1.value]['id']
			camplistinit()
		}
	}
	// 营地列表
	async function camplistinit(str) {
		if (str == '搜索') {
			if (!keywords.value) {
				uni.showToast({
					title: '请输入关键字搜索',
					icon: 'none'
				})
				return
			}
			active.value = -1
		}
		const res = await camplist({
			aid: active.value == -1 ? '' : classList.value[active.value]['id'],
			sjid: timerarr.value[active1.value]['id'],
			keywords: keywords.value,
		})
		if (res.data.code == 1) {
			camplistarr.value = res.data.data.list
			for (var i in camplistarr.value) {
				camplistarr.value[i]['bool'] = false
			}
		}
	}

	function getNext30Days() {
		let dates = [];
		let today = new Date();

		for (let i = 0; i < 30; i++) {
			let date = new Date();
			date.setDate(today.getDate() + i);

			let year = date.getFullYear();
			let month = date.getMonth() + 1; // 月份从0开始，需要加1
			let day = date.getDate();

			// 格式化月份和日期，确保两位数字
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;

			// 格式化为 YYYY-MM-DD
			let formattedDate = `${year}-${month}-${day}`;

			// 获取星期几
			let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			let weekday = weekdays[date.getDay()];

			dates.push({
				date: formattedDate,
				day: day,
				month: month,
				year: year,
				weekday: '周' + weekday,
				fullDate: `${year}年${month}月${day}日 星期${weekday}`
			});
		}
		// 2025-5-15
		startDate.value = `${dates[0]['year']}-${dates[0]['month']}-${dates[0]['day']}`
		endDate.value =
			`${dates[dates.length-1]['year']}-${dates[dates.length-1]['month']}-${dates[dates.length-1]['day']}`
	}

	function allquanx() {
		flag.value = !flag.value
		for (var i in camplistarr.value) {
			camplistarr.value[i]['bool'] = flag.value
		}
	}

	// 类型列表
	async function classlistinit() {
		const res = await classlist()
		if (res.data.code == 1) {
			classList.value = res.data.data.classlist
			timeinit()
		}
	}
	// 时间段列表
	async function timeinit() {
		const res = await timesj({
			date: query.datetime,
		})
		if (res.data.code == 1) {
			timerarr.value = res.data.data.timelist
			query.pid = timerarr.value[active1.value]['id']
			camplistinit()
		}
	}

	function gopage(item) {
		uni.setStorageSync('yuyuesoninfo', query)
		uni.navigateTo({
			url: '/sub_Campposition/Campposition/yingdidetail1?pagetitle=' + item.title + '&id=' + item.id
		})
	}
</script>

<style lang="scss">
	.closeicon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 80rpx;
	}

	.msgicon {
		width: 532rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;

		}

		image {
			width: 532rpx;
		}
	}

	@import '/styles/Campposition.scss';
</style>